<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <title>师兄帮忙</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
<style>
    body, p, ul, li, div,h4 {
        margin: 0;
        padding: 0;
    }
    body {
        font: 14px "SimHei";
        background:#eee;
    }
    a {
        color: #FFF;
        text-decoration: none;
    }
    ul, ol {
        list-style: none;
    }
    img {
        border: none;
    }
    .tit {
        height: 2em;
        line-height: 2em;
        font-size: 1.4em;
        color: #fff;
        text-align: center;
        background: #f3899f;
    }
    .nav-box {
        margin: 0 10px 15px 10px;
    }
    .issue {
      height: 1.8em;
      border: 3px solid #d3d3d1;
      border-radius: 15px;
      background: #FCFCFC;
      display: block;
      width: 100px;
      text-align: center;
      line-height: 1.8em;
      color: #eacec1;
      margin: 5px auto;
    }
    .content li {
      border-radius: 5px;
      overflow: hidden;
      margin-top: 10px;
    }
    .content li .li-tit {
      background: #fff;
      color: #444;
      padding: 10px 0;
      margin-bottom: 5px;
    }
    .content li .li-bottom{
      color: #444;
      background: #fff;
      padding: 10px;
    }
    .content li .li-bottom p span {
      color: #e7aabc;
    }
    .content li .li-bottom p:nth-of-type(1) {
        margin-bottom: 5px;
    }
    .add{
       height: 2em;
       line-height: 2em;
       text-align: center;
    }
    .loader span{  
      display: inline-block;  
      vertical-align: middle;  
      width: 10px;  
      height: 10px;  
      background: black;  
      border-radius: 50px;  
      -webkit-animation: loader 1s infinite alternate;  
      -moz-animation: loader 1s infinite alternate;  
    }  
    .loader span:nth-of-type(2) {  
        -webkit-animation-delay: 0.2s;  
        -moz-animation-delay: 0.2s;  
    }  
    .loader span:nth-of-type(3) {  
        -webkit-animation-delay: 0.4s;  
        -moz-animation-delay: 0.4s;  
    }  
    .loader span:nth-of-type(4) {  
        -webkit-animation-delay: 0.6s;  
        -moz-animation-delay: 0.6s;  
    }  
    .loader span:nth-of-type(5) {  
        -webkit-animation-delay: 0.8s;  
        -moz-animation-delay: 0.8s;  
    }  
    @-webkit-keyframes loader {  
        0% {  
            opacity: 1;  
        }  
        100% {  
            opacity: 0.1;  
        }  
    }  
    @-moz-keyframes loader {  
        0% {  
            opacity: 1;  
        }  
        100% {  
            opacity: 0.1;  
        }  
    }  
    .loader {
      display: none;
      text-align: center;
      margin: 10px 0;
    }
    .content li .li-tit span {
      display:block;
      line-height: 1.5em;
      padding:0 10px;
      position: absolute;
      left: 0;
      top: 0;
      word-break: break-all;
    }
    .content li .li-tit p {
      height: 3em;
      overflow: hidden;
      position: relative;
    }
    .click-bottom{
      background: #fff;
      margin: -10px 0 10px 0 ;
      display: none;
    }
    .click-hidden{
      width: 70px;
      height: 1em;
      line-height: 1em;
      border-radius: 5px 5px 0 0;
      background: #F1F1F1;
      text-align: center;
      margin: 0 auto;
      color: #8A9DB3;
      display: none;
    }
    .click-show{
      width: 100px;
      height: 1em;
      line-height: 1em;
      border-radius: 5px 5px 0 0;
      background: #F1F1F1;
      text-align: center;
      margin: 0 auto;
      color: #8A9DB3;
      display: none;
    }
    .content li div.show p{
      height: auto;
      overflow: visible;
    }
    .content li div.show span {
      position:static;
    }
</style>
<script src="__PUBLIC__/Style/Common/js/zepto.min.admin.js"></script>
<script src="__PUBLIC__/Style/Common/js/GH.1.1.js"></script>
<script>
 $(function(){
   var url="__URL__/getCurrentContent";
   var oCont=document.getElementById('content');
     GH.ajax( url,{p:1}, function(arr){
      if(arr!=null||arr!=undefined){
            for(var i=0;i<arr.length;i++){
              console.log(arr[i].create_time);
              var oDiv=document.createElement("li");
               oDiv.innerHTML=arr[i].content;
                oDiv.innerHTML="<div class='li-tit'><p><span>"
                                +arr[i].content+"</span></p></div><div class='click-bottom'> <div class='click-hidden'>点击收起</div><div class='click-show'>点击展开全文</div></div><div class='li-bottom'><p><span>签名：</span>"
                                +arr[i].name+"</p><p><span>时间：</span>"
                                +arr[i].create_time+"</p></div>";
             oCont.appendChild(oDiv);
             }
                packaging();
           }
          }, "post");
    $(window).scroll(function() {
      if(($(document.body).height()-$(window).scrollTop()-$(window).height())<10){ 
                $('.loader').show();
                 GH.ajax( url,{p:$('#add-num').val()}, function(arr){
                   $('.loader').hide();
                   if(arr!=null||arr!=undefined){
                        $('#add-num').val(Number($('#add-num').val())+1);//加载次数
                        for(var i=0;i<arr.length;i++){
                          console.log(arr[i].content);
                          var oDiv=document.createElement("li");
                           oDiv.innerHTML=arr[i].content;
                            oDiv.innerHTML="<div class='li-tit'><p><span>"
                                            +arr[i].content+"</span></p></div><div class='click-bottom'> <div class='click-hidden'>点击收起</div><div class='click-show'>点击展开全文</div></div><div class='li-bottom'><p><span>签名：</span>"
                                            +arr[i].name+"</p><p><span>时间：</span>"
                                            +arr[i].create_time+"</p></div>";
                         oCont.appendChild(oDiv);
                         }
                            packaging();
                     }else{
                       GH.showMessage('已经没有数据了哦~');
                     }
                    }, "post");
       }; 
    });
    function packaging(){
         $('.content li .li-tit span').each(function(i){
            if($('.content li .li-tit p').eq(0).height()<$('.content li .li-tit span').eq(i).height()){
               $('.click-bottom').eq(i).show();
               $('.click-show').show();
            }
          })
         $('.content li  .click-hidden').each(function(i){
            $('.content li .click-hidden').eq(i).click(function(){
                $(this).hide();
               $('.content li .li-tit').eq(i).removeClass('show');
               $('.click-show').eq(i).show();
            })
            $('.content li .click-show').eq(i).click(function(){
                $(this).hide();
               $('.content li .li-tit').eq(i).addClass('show');
               $('.click-hidden').eq(i).show();
            })
         });
    }     
  })
</script>

</head>
<body>
  <div class="tit">师兄帮忙</div>
  <div class="nav-box">
    <a class="issue" href="__URL__/publish/sid/{$sid}">发布留言</a>
    <ul class="content" id="content"></ul>
    <input type="hidden" id="add-num" value="2"/>
  </div>
  <div class="loader">  
    <span></span>  
    <span></span>  
    <span></span>  
    <span></span>  
    <span></span>  
  </div>  
</body>
</html>